<!--  -->
<template>
  <div>
    请选择年份：
    <el-select v-model="year" placeholder="请选择" size="small">
      <el-option v-for="item in years" :key="item" :value="item" :label="item"> </el-option>
    </el-select>
    <div class="box">
      <h1 class=" title">河北省{{ year }}年录取批次线</h1>
      <el-table :data="tableData" style="width: 75%;margin:20px auto">
        <el-table-column :prop="key" :label="obj" width="200" v-for="(obj, key) of tableColumn" :key="obj"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { batchList } from "@/data/batch.js"
import { tableColumn } from "@/data/table.js"
export default {
  data() {
    return {
      batchList,
      tableColumn,
      tableData: [],
      years: ["2023", "2022", "2021", "2020", "2019"],
      year: "2023"
    }
  },
  watch: {
    year: {
      immediate: true,
      handler(newVal, oldVal) {
        this.tableData = this.batchList.filter(item => item.year == newVal)
      }
    }
  }
}
</script>

<style scoped>
.title {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
